<template>
  <div style="display: flex">
    <div style="flex: 1">
      <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
        <el-radio-button :label="false"
          ><el-icon><Expand />展开</el-icon></el-radio-button
        >
        <el-radio-button :label="true"
          ><el-icon><Fold />缩进</el-icon></el-radio-button
        >
      </el-radio-group>
      <el-menu default-active="1" class="el-menu-vertical-demo" :collapse="isCollapse">
        <router-link to="/MyNav" class="custom-link">
          <el-menu-item index="1">
            <el-icon><Menu /></el-icon>
            <template #title> 首页 </template>
          </el-menu-item></router-link
        >

        <router-link to="/Device" class="custom-link">
          <el-menu-item index="2">
            <el-icon><Cpu /></el-icon>
            <template #title> 设备管理 </template>
          </el-menu-item></router-link
        >

        <router-link to="/AutoTemplate" class="custom-link">
          <el-menu-item index="3">
            <el-icon><Operation /></el-icon>
            <template #title> 自动化管理 </template>
          </el-menu-item>
        </router-link>

        <router-link to="/TimeTask" class="custom-link">
          <el-menu-item index="4">
            <el-icon><Comment /></el-icon>
            <template #title> 通知管理 </template>
          </el-menu-item>
        </router-link>

        <!-- <router-link to="/Product" class="custom-link">
          <el-menu-item index="5">
            <el-icon><View /></el-icon>
            <template #title> 产品列表 </template>
          </el-menu-item>
        </router-link> -->

        <router-link to="/VirtualDevice" class="custom-link">
          <el-menu-item index="6">
            <el-icon><Platform /></el-icon>
            <template #title> 虚拟设备 </template>
          </el-menu-item>
        </router-link>

        <router-link to="/SystemVariable" class="custom-link">
          <el-menu-item index="7">
            <el-icon><Compass /></el-icon>
            <template #title> 系统变量 </template>
          </el-menu-item>
        </router-link>

        <router-link to="/CustomDevice" class="custom-link">
          <el-menu-item index="10">
            <el-icon><Notification /></el-icon>
            <template #title> 自定义设备 </template>
          </el-menu-item>
        </router-link>

        <router-link to="/SystemSettings" class="custom-link">
          <el-menu-item index="8">
            <el-icon><Setting /></el-icon>
            <template #title> 系统参数 </template>
          </el-menu-item>
        </router-link>

        <router-link to="/AboutProject" class="custom-link">
          <el-menu-item index="9">
            <el-icon><Warning /></el-icon>
            <template #title> 关于 </template>
          </el-menu-item>
        </router-link>
      </el-menu>
    </div>
    <div style="flex: 10; position: relative">
      <router-view />
      <div style="position: fixed; bottom: 10vh; width: 100%" v-if="title">
        <el-alert type="error" :closable="false" :title="title" />
      </div>
    </div>
  </div>
</template>
   
   <script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import until from '../../until/csUntil/deviceUtils'
const router = useRouter()
onMounted(() => {
  router.push('/MyNav')
  timer.value = null
  timer.value = setInterval(() => {
    openCOMlist()
  }, 3000)
})
const timer = ref(null)
// vuex 实例对象
const store = useStore()

const title = ref(null)

const openCOMlist = () => {
  let res = window.api.listDvcAndDvcVer()
  let DeviceList = JSON.parse(res)
  let messageDange = ''
  DeviceList.forEach((item) => {
    if (item?.isVirtual === 'IS_NOT_VIRTUAL' && item?.ComPort) {
      let ishave = window.api.get485DeviceConnected(item.id)

      if (!ishave) {
        messageDange += `${item.name}已离线----`
        // console.log(
        //   item.id,
        //   item?.ComPort,
        //   JSON.stringify(item.BaudRate),
        //   item.DevicetypeValue,
        //   item.Channels
        // )
        window.api.openCom(
          item.id,
          item?.ComPort,
          JSON.stringify(item.BaudRate),
          item.DevicetypeValue,
          item.Channels
        )
      }
      ishave = null
    }
    res = null
    DeviceList = null
    title.value = messageDange
  })
  // res.Searchlist.forEach((item) => {
  //   if (item?.ComPort) {
  //     const result = window.api.openCom(item?.ComPort, '9600')
  //     if (result) {
  //     }
  //     if (result === false) {
  //     }
  //   }
  // })
}
onBeforeUnmount(() => {
  clearInterval(timer.value)
})
const isCollapse = ref(false)
</script>
   
   <style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.custom-link {
  text-decoration: none; /* 去掉下划线 */
  color: black; /* 设置字体颜色为白色 */
}

::v-deep .el-alert__content {
  margin-left: 30%;
}

::v-deep .el-alert__title {
  font-size: 2rem;
}
</style>